<template>
    <div class="doctorDetail">
        <navBar :titleName="titleName"></navBar>
        <div class="body">
            <div class="pric-style">
                <img :src="phoneUrl" class="cell-prc-img"/>
            </div>
            <nut-textinput
                    :clearBtn="false"
                    label="姓名"
                    :hasBorder="false"
                    readonly="true"
                    v-model="doctorName"
            />
            <nut-textinput
                    :clearBtn="false"
                    label="性别"
                    :hasBorder="false"
                    readonly="true"
                    v-model="gender"
            />
            <nut-textinput
                    :clearBtn="false"
                    label="职业类别"
                    :hasBorder="false"
                    readonly="true"
                    v-model="work"
            />
            <nut-textinput
                    :clearBtn="false"
                    label="职业范围"
                    :hasBorder="false"
                    readonly="true"
                    v-model="workRonge"
            />
            <nut-textinput
                    :clearBtn="false"
                    label="证书编号"
                    :hasBorder="false"
                    readonly="true"
                    v-model="certificate"
            />
            <nut-textinput
                    :clearBtn="false"
                    label="签发日期"
                    :hasBorder="false"
                    readonly="true"
                    v-model="dateNo"
            />
            <nut-textinput
                    :clearBtn="false"
                    label="签发机关"
                    :hasBorder="false"
                    readonly="true"
                    v-model="IssuingUnit"
            />
        </div>
    </div>
</template>

<script>
    import navBar from '@/components/common/navBar.vue'

    export default {
        name: "doctorDetail",
        components: {
            navBar,
        },
        data() {
            return {
                titleName: '医生认证',
                doctorName: '周医生',
                gender: '男',
                work: '外科专科',
                workRonge: '外科专科',
                certificate: '1234567890',
                dateNo: '2018-08-10',
                IssuingUnit: '',
                phoneUrl: ''

            }
        },
        updated() {
            this.init();
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                let doctor = this.$store.state.doctor;
                this.doctorName = doctor.doctorName;
                this.gender = (doctor.gender === 1) ? "男" : "女";
                this.work = doctor.qualification;
                this.workRonge = doctor.speciality;
                this.certificate = doctor.certificate;
                this.dateNo = doctor.issuanceDate;
                this.IssuingUnit = doctor.issuanceGov;
                this.phoneUrl = doctor.phoneUrl;
                setTimeout(function () {
                    let len = document.getElementsByTagName("input").length;
                    for (let i = 0; i < len; i++) {
                        document.getElementsByTagName("input")[i].style.textAlign = "right";
                    }
                },100);
            }
        }
    }
</script>

<style scoped>
    .doctorDetail {
        min-height: 740px;
        background-color: #e6e6e6;
        padding-bottom: 20px;
    }

    .body {
        background-color: white;
        margin-top: 42px;
    }

    .cell-prc-img {
        max-width: 80px;
        max-height: 80px;
        border-radius: 40px;
    }

    .nut-textinput {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: relative;
        min-height: 50px;
        border-bottom: 1px solid #c9cbd1;
    }

    .doctorDetail .body .nut-textinput input {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        height: 40px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 14px;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #DDDFE6;
        background-color: '#FFFFFF';
        padding: 0 30px 0 10px;
        color: #ccc;
        text-align: right !important;
    }

    .cell-prc-img {
        max-width: 100px;
        max-height: 100px;
        border-radius: 50px
    }

    .pric-style {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .nut-textinput-label {
        min-width: 65px !important;
    }

</style>